<template>
  <t-table
    row-key="id"
    table-layout="auto"
    height="60vh"
    :data="reverseStore.getList()"
    :columns="columns"
    :pagination="reverseStore.page"
    :loading="reverseStore.page.loading"
    @page-change="({ current, pageSize }) => reverseStore.reset(current, pageSize)"
    :selectedRowKeys="select"
    @select-change="selectChange"
    hover
  >
    <template #number="{ row }">
      <b>{{ row.number }}</b><br>
      {{ row.order_number }}
    </template>
    <template #name="{ row }">
      <t-row :gutter="15" align="middle">
        <t-col flex="50px">
          <img :src="row.image" style="width: 50px; border-radius: 5px;" />
        </t-col>
        <t-col flex="1">
          {{ row.name }}
        </t-col>
      </t-row>
    </template>
    <template #sku="{ row }">
      <t-tag theme="primary" variant="light">{{ row.sku }}</t-tag>
    </template>
    <template #money="{ row }">
      {{ app.money.format(row.money) }}
    </template>
    <template #time="{ row }">
      {{ row.time.format() }}
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import reverseStore from '../../store/reverse'

  const plugin = index.plugin
  const columns = [{
    colKey: 'row-select',
    type: 'multiple',
    width: 50,
  }, {
    title: plugin.t('reverse.number'),
    colKey: 'number',
    cell: 'number',
    width: 160
  }, {
    title: plugin.t('reverse.ticket'),
    colKey: 'ticket',
    width: 160
  }, {
    title: plugin.t('reverse.name'),
    colKey: 'name',
    cell: 'name',
    width: 400
  }, {
    title: plugin.t('reverse.sku'),
    colKey: 'sku',
    cell: 'sku',
  }, {
    title: plugin.t('reverse.money'),
    colKey: 'money',
    cell: 'money'
  }, {
    title: plugin.t('reverse.time'),
    colKey: 'time',
    cell: 'time',
    width: 160,
    align: 'right'
  }]

  const select = reverseStore.select
  const selectChange = (data, ctx) => {
    select.value = data
    // 更新选择的原数据集，并翻转数组
    reverseStore.selectData = ctx.selectedRowData.reverse()
  }

  reverseStore.get()
</script>